<template>
	<zui-watermark content="东莞宏悦酒业" :opacity="0.08" :overlay="0.5" ></zui-watermark>
	<view class="user-box" v-if="Object.keys(userInfo).length > 0">
		<view>
			<view class="user-name">Hi，{{ userInfo.surname + userInfo.name }}</view>
			<view class="welcome-text">欢迎回来！</view>
		</view>
		<!-- <view class="edit-text" @click="toEdit">编辑资料</view> -->
	</view>
	<view class="top" v-else>
		<view class="page-title">WELCOME</view>
		<text class="login-text" @click="login">登录注册</text>
		<view class="desc">
			欢迎来到宏悦来酒业，请先登录或注册账号
		</view>
	</view>
	<view class="tool-box" v-if="sign">
		<MenuItem v-for="item in menu" :key="item.name" :info="item" />
	</view>
	<view class="address-area">
		<view class="f-s-16"><text class="f-w-800">寄件地址</text> <text class="f-s-10 u-p-l-10 u-info">点击下面地址即可复制</text>
		</view>
		<up-copy v-for="(Add,index) in AddressData" :key="index" :content="Add">
			<view class="f-s-12 u-m-t-32 u-main-color" style="text-decoration: underline;">
				{{ Add }}
			</view>
		</up-copy>
	</view>
</template>

<script setup>
	import MenuItem from '@/components/MenuItem.vue';
	import {
		ref
	} from 'vue';
	import {
		onShow,onLoad
	} from '@dcloudio/uni-app';
	import Store from '@/Store/index.js';
	import {
		getToken
	} from '@/Util/auth.js';
	import Utils from '@/Util/common.js';
	import ConfigApi from '@/Api/Config.js'

	const userInfo = ref({})
	const sign = ref(false)
	const AddressData = ref([])
	const menu = ref([{
			name: '提交报单',
			icon: '&#xe62d;',
			page: '/pages/Post'
		}, {
			name: '我的货单',
			icon: '&#xe61c;',
			page: '/pages/Manifest'
		},
		{
			name: '实时行情',
			icon: '&#xe605;',
			page: '/pages/index'
		},
		{
			name: '加入群聊',
			icon: '&#xe62b;',
			page: '/pages/Ad'
		}
	])

	onLoad(() => {
		
		ConfigApi.AddressText().then(resp => {
			// 换行符分隔
			AddressData.value = resp.data.split('\n')
		})
		
		uni.login({
			success: (logRes) => {
				Store.dispatch('Login', logRes.code).then(signed => {
					sign.value = signed
					if (!signed) {
						userInfo.value = {}
						uni.navigateTo({
							url: '/pages/Sign'
						})
						return
					}
					userInfo.value = Store.getters.userInfo
				})
			}
		})
	})
	
	onShow(()=>{
		uni.login({
			success: (logRes) => {
				Store.dispatch('Login', logRes.code).then(signed => {
					sign.value = signed
					if (!signed) {
						userInfo.value = {}
						return
					}
					userInfo.value = Store.getters.userInfo
				})
			}
		})
	})

	const toEdit = () => {
		// uni.navigateTo({
		// 	url: '/subPackages/mine/edit'
		// })
		uni.showToast({
			title: '暂未开放',
			icon: 'none'
		})
	}

	const login = () => {
		uni.navigateTo({
			url: '/pages/Sign'
		})
	}
</script>

<style lang="scss">
	.user-box {
		margin: 120px 26px 56px 26px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.user-name {
			font-size: 28px;
			font-weight: bolder;
			letter-spacing: 2px;
		}

		.welcome-text {
			font-size: 16px;
			margin-top: 16px;
			font-weight: 300;
		}

		.edit-text {
			font-size: 12px;
			font-weight: bolder;
			position: relative;

			&::after {
				content: '';
				display: inline-block;
				width: 50px;
				height: 1px;
				background-color: #000;
				position: absolute;
				bottom: -4px;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.top {
		text-align: center;
		margin-top: 120px;
		margin-bottom: 40px;

		.page-title {
			font-size: 30px;
			font-weight: bolder;
			letter-spacing: 2px;
			margin-bottom: 20px;
		}

		.login-text {
			font-size: 14px;
			font-weight: bolder;
			position: relative;

			&::after {
				position: absolute;
				content: '';
				display: inline-block;
				width: 60px;
				height: 1px;
				bottom: -4px;
				left: 50%;
				transform: translateX(-50%);
				background-color: #000;
			}

		}

		.desc {
			padding: 30px 60px;
			font-size: 12px;
			line-height: 18px;
		}
	}


	.tool-box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
		padding: 0 26px;
	}

	.address-area {
		margin: 10px 26px;
		padding: 26px;
		background-color: #F8F8F8;
	}
</style>